<template>
  <el-form :model="form" :rules="formRules" ref="form">
    <el-form-item prop="title">
      <el-input v-model="form.title" placeholder="请输入作品名称">
        <span slot="append">50字以内</span>
      </el-input>
    </el-form-item>

    <el-form-item prop="worksClassify">
      <el-select v-model="form.worksClassify" placeholder="请选择作品分类" style="margin-right: 20px;">
        <el-option label="餐厅设计" value="餐厅设计"></el-option>
        <el-option label="娱乐空间" value="娱乐空间"></el-option>
        <el-option label="休闲会所" value="休闲会所"></el-option>
        <el-option label="酒店" value="酒店"></el-option>
        <el-option label="购物中心" value="购物中心"></el-option>
        <el-option label="办公室设计" value="办公室设计"></el-option>
        <el-option label="其他" value="其他"></el-option>
      </el-select>
      <!-- <el-select v-model="form.limit" placeholder="请选择使用限制" style="width: 340px">
        <el-option label="禁止匿名转载；禁止商业使用；禁止个人使用" value="1"></el-option>
        <el-option label="禁止匿名转载；禁止商业使用；" value="2"></el-option>
        <el-option label="不限制作品用途" value="3"></el-option>
      </el-select> -->
    </el-form-item>
    
    <el-form-item style="margin-bottom: 0">
      <el-col :span="8" style="margin-right: 20px;">
        <el-form-item prop="worksArea">
          <el-input v-model="form.worksArea" placeholder="请填写项目面积">
            <span slot="append">m<sup>2</sup></span>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item prop="worksTotalPrice">
          <el-input v-model="form.worksTotalPrice" placeholder="请填写项目造价(选填)">
            <span slot="append">万元</span>
          </el-input>
        </el-form-item>
      </el-col>
    </el-form-item>
    <el-form-item prop="description">
      <el-input v-model="form.description" type="textarea" placeholder="作品描述">
        <span slot="append">2000字以内</span>
      </el-input>
    </el-form-item>
    <el-form-item>
      <el-input v-model="form.allViewUrl" placeholder="全景图链接"></el-input>
    </el-form-item>

    <el-form-item prop="picUrls">
      上传作品图
      <app-upload 
        :action="$store.state.url.uploadImage" 
        list-type="picture-card" 
        :form-data="form" form-key="picUrls" :max-num="10">
      </app-upload>
    </el-form-item>
    <el-form-item label="原创承诺">
      <el-switch v-model="promise"></el-switch> 本人理解并承诺以下内容
    </el-form-item>
    <el-form-item>
      <el-button v-if="mode === 'add'" :disabled="!submitAble" type="primary" @click="onSave">立即添加</el-button>
      <el-button v-else :disabled="!submitAble" type="primary" @click="onUpdate">立即修改</el-button>
    </el-form-item>
  </el-form>
</template>


<script>
import appUpload from '../../../component/appUpload'
import { saveWorks , listWorksInfo} from '../../../api/picture'
export default {
  name: 'pictureImageAdd',
  props: {
      mode: String
  },
  components: {
    appUpload
  },
  data() {
    return {
      form: {
          memberId: localStorage.designerId,
          worksType: 1,
          title: '',
          worksClassify: '',
          worksArea: '',
          worksTotalPrice: '',
          description: '',
          allViewUrl: '',
          picUrls: '',
          // picUrls: 'https://uege-1258242722.cos.ap-shanghai.myqcloud.com/ygsj/guochunsheng/2019010515072411049.jpg,https://uege-1258242722.cos.ap-shanghai.myqcloud.com/ygsj/guochunsheng/2019010515072837150.jpg,https://uege-1258242722.cos.ap-shanghai.myqcloud.com/ygsj/guochunsheng/2019010515073595851.jpg', 
      },
      formRules: {
        title: [ { required: true, message: '请输入', trigger: 'blur' } ],
        worksClassify: [ { required: true, message: '请选择', trigger: 'change' } ],
        worksArea: [ { required: true, message: '请输入', trigger: 'blur' } ],
        worksTotalPrice: [ { required: true, message: '请输入', trigger: 'blur' } ],
        description: [ { required: true, message: '请输入', trigger: 'blur' } ],
        picUrls: [ { required: true, message: '请上传', trigger: 'blur' } ],
      },
      promise: false,
      uploading: false,
    };
  },
  computed: {
    submitAble(){
      return !this.uploading && this.promise
    }
  },
  methods: {
    onSave(){
      this.$refs.form.validate((valid) => {
        if (valid) {
          saveWorks(this.form).then(rsp => {
            if(rsp.code === 200){
              this.$message.success('添加成功')
              this.$router.push({name: 'myPicture'})
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    onUpdate(){
      this.$refs.form.validate((valid) => {
        if (valid) {
          saveWorks(this.form).then(rsp => {
            if(rsp.code === 200){
              this.$message.success('修改成功')
              this.$router.push({name: 'myPicture'})
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    queryImages(worksId){
      listWorksInfo(worksId).then(rsp => {
        if(rsp.code === 200 && rsp.data){
          this.form.picUrls = rsp.data.map(v => v.worksUrl).join(',')
        }
      })
    },
  },
  created(){
      if(this.mode === 'edit'){
          this.form = JSON.parse(localStorage.workEditData)
          this.queryImages(this.form.id)
      }
  }
};
</script>

<style lang="less" scoped>
.el-form {
  padding: 20px 50px;
  .form-block {
    display: block;
    width: 100%;
    clear: both;
  }
}
</style>
